import { useSearchArticle } from '@/services/article';
import { ARTICLES_SOURCE } from '@/services/constant/articles';
import {
  TagsOutlined,
  FieldTimeOutlined,
  EyeOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from '@ant-design/icons';
import { ProList } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { history, useSearchParams } from '@umijs/max';
import { Space, Tabs, TabsProps, Tag } from 'antd';
import React, { useMemo, useState } from 'react';
import { IconText } from '../dashboard/my-articles';
import { CoverImg, OverflowHiddenText } from '../dashboard/my-articles/style';

const Search: React.FC = () => {
  const [searchParams] = useSearchParams();
  const { data: source } = useSearchArticle(searchParams.get('key') ?? '');
  const intl = useIntl();
  const [activeKey, setActiveKey] = useState<number>(-1);

  const dataSource = useMemo(() => {
    return (
      source?.data &&
      source.data
        .filter((item) =>
          activeKey === -1 ? true : activeKey === item.articleSource,
        )
        .map((item: API.IArticles) => ({
          ...item,
          title: <OverflowHiddenText row={1}>{item.title}</OverflowHiddenText>,
        }))
    );
  }, [source, activeKey]);

  const items: TabsProps['items'] = [
    {
      key: '-1',
      label: `全部`,
    },
    {
      key: '0',
      label: `${intl.formatMessage({
        id: `article.articleSource.${ARTICLES_SOURCE[0]}`,
      })}`,
    },
    {
      key: '1',
      label: `${intl.formatMessage({
        id: `article.articleSource.${ARTICLES_SOURCE[1]}`,
      })}`,
    },
    {
      key: '2',
      label: `${intl.formatMessage({
        id: `article.articleSource.${ARTICLES_SOURCE[2]}`,
      })}`,
    },
  ];

  const onChange = (e: string) => {
    setActiveKey(parseInt(e));
  };

  return (
    <>
      <ProList<any>
        onRow={(record: any) => {
          return {
            onClick: () => {
              history.push(`/article?id=${record.id}`);
            },
          };
        }}
        itemLayout="vertical"
        rowKey="id"
        headerTitle={
          <Tabs
            defaultActiveKey="-1"
            items={items}
            onChange={(e) => onChange(e)}
          />
        }
        dataSource={dataSource}
        metas={{
          title: {},
          subTitle: {},
          description: {
            render: (_, record) => (
              <Space>
                <TagsOutlined />
                {record.tags &&
                  record.tags.split('/').map((tag: string, i: number) => (
                    <Tag color="#5BD8A6" key={i}>
                      {tag}
                    </Tag>
                  ))}
              </Space>
            ),
          },
          extra: {
            render: (_: any, record: { avatar: string | undefined }) => {
              return record.avatar ? (
                <CoverImg src={record.avatar ?? ''}></CoverImg>
              ) : (
                ''
              );
            },
          },
          content: {
            render: (_, record) => {
              return (
                <OverflowHiddenText>{record.introduction}</OverflowHiddenText>
              );
            },
          },
          actions: {
            render: (_, record) => [
              <IconText
                icon={FieldTimeOutlined}
                text={record.time}
                key="time"
              />,
              <span style={{ width: 20 }} key="space"></span>,
              <IconText
                icon={EyeOutlined}
                text={record.lookNum ?? 0}
                key="list-vertical-eye"
              />,
              <IconText
                icon={StarOutlined}
                text={record.starNum ?? 0}
                key="list-vertical-star"
              />,
              <IconText
                icon={LikeOutlined}
                text={record.likeNum ?? 0}
                key="list-vertical-like"
              />,
              <IconText
                icon={MessageOutlined}
                text={record.commentNum ?? 0}
                key="list-vertical-message"
              />,
            ],
          },
        }}
      />
    </>
  );
};

export default Search;
